Sinkronizacija stanja React custom hookova: Postizanje koordinacije stanja hookova

React custom hookovi moćan su način za izdvajanje višekratno iskoristive logike iz komponenti. Međutim, kada više hookova treba dijeliti ili koordinirati stanje, stvari se mogu zakomplicirati. Ovaj članak istražuje različite tehnike za sinkronizaciju stanja između React custom hookova, omogućavajući besprijekornu komunikaciju komponenti i dosljednost podataka u složenim aplikacijama. Pokrit ćemo različite pristupe, od jednostavnog dijeljenog stanja do naprednijih tehnika koje koriste useContext i useReducer.

Zašto sinkronizirati stanje između custom hookova?

Prije nego što zaronimo u tehničke detalje, razjasnimo zašto biste uopće trebali sinkronizirati stanje između custom hookova. Razmotrite ove scenarije:

• Dijeljeni podaci: Više komponenti treba pristup istim podacima, a sve promjene napravljene u jednoj komponenti trebale bi se odraziti u drugima. Na primjer, podaci o korisničkom profilu prikazani u različitim dijelovima aplikacije.
• Koordinirane akcije: Akcija jednog hooka treba pokrenuti ažuriranja u stanju drugog hooka. Zamislite košaricu za kupnju gdje dodavanje proizvoda ažurira i sadržaj košarice i zaseban hook odgovoran za izračun troškova dostave.
• Kontrola korisničkog sučelja (UI): Upravljanje dijeljenim stanjem korisničkog sučelja, poput vidljivosti modala, kroz različite komponente. Otvaranje modala u jednoj komponenti trebalo bi ga automatski zatvoriti u drugima.
• Upravljanje obrascima: Rukovanje složenim obrascima gdje različitim odjeljcima upravljaju zasebni hookovi, a cjelokupno stanje obrasca mora biti dosljedno. Ovo je uobičajeno u obrascima s više koraka.

Bez pravilne sinkronizacije, vaša aplikacija može patiti od nedosljednosti podataka, neočekivanog ponašanja i lošeg korisničkog iskustva. Stoga je razumijevanje koordinacije stanja ključno za izgradnju robusnih i održivih React aplikacija.

Tehnike za koordinaciju stanja hookova

Postoji nekoliko tehnika koje se mogu koristiti za sinkronizaciju stanja između custom hookova. Izbor metode ovisi o složenosti stanja i razini povezanosti koja je potrebna između hookova.

1. Dijeljeno stanje pomoću React Contexta

Hook useContext omogućuje komponentama da se pretplate na React context. Ovo je izvrstan način za dijeljenje stanja kroz stablo komponenti, uključujući i custom hookove. Stvaranjem contexta i pružanjem njegove vrijednosti pomoću providera, više hookova može pristupiti i ažurirati isto stanje.

Primjer: Upravljanje temom

Kreirajmo jednostavan sustav za upravljanje temom pomoću React Contexta. Ovo je čest slučaj upotrebe gdje više komponenti treba reagirati na trenutnu temu (svijetlu ili tamnu).

import React, { createContext, useContext, useState } from 'react';

// Kreiranje Theme Contexta
const ThemeContext = createContext();

// Kreiranje komponente Theme Provider
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const value = {
    theme,
    toggleTheme,
  };

  return (
    
      {children}
    
  );
};

// Custom hook za pristup Theme Contextu
const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme se mora koristiti unutar ThemeProvidera');
  }
  return context;
};

export { ThemeProvider, useTheme };

Objašnjenje:

• ThemeContext: Ovo je objekt contexta koji sadrži stanje teme i funkciju za ažuriranje.
• ThemeProvider: Ova komponenta pruža stanje teme svojoj djeci. Koristi useState za upravljanje temom i izlaže funkciju toggleTheme. Prop value komponente ThemeContext.Provider je objekt koji sadrži temu i funkciju za prebacivanje.
• useTheme: Ovaj custom hook omogućuje komponentama pristup contextu teme. Koristi useContext za pretplatu na context i vraća temu i funkciju za prebacivanje.

Primjer upotrebe:

import React from 'react';
import { ThemeProvider, useTheme } from './ThemeContext';

const MyComponent = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    

      
Trenutna tema: {theme}
      Promijeni temu
    
  );
};

const AnotherComponent = () => {
  const { theme } = useTheme();

  return (
    
Trenutna tema je također: {theme}
  );
};

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

U ovom primjeru, i MyComponent i AnotherComponent koriste hook useTheme za pristup istom stanju teme. Kada se tema promijeni u MyComponent, AnotherComponent se automatski ažurira kako bi odražavala promjenu.

Prednosti korištenja Contexta:

• Jednostavno dijeljenje: Lako je dijeliti stanje kroz stablo komponenti.
• Centralizirano stanje: Stanje se upravlja na jednoj lokaciji (u provider komponenti).
• Automatska ažuriranja: Komponente se automatski ponovno renderiraju kada se vrijednost contexta promijeni.

Nedostaci korištenja Contexta:

• Problemi s performansama: Sve komponente koje su pretplaćene na context ponovno će se renderirati kada se vrijednost contexta promijeni, čak i ako ne koriste specifični dio koji se promijenio. To se može optimizirati tehnikama poput memoizacije.
• Čvrsta povezanost (Tight Coupling): Komponente postaju čvrsto povezane s contextom, što može otežati njihovo testiranje i ponovnu upotrebu u različitim kontekstima.
• Pakao contexta (Context Hell): Pretjerana upotreba contexta može dovesti do složenih i teško upravljivih stabala komponenti, slično "bušenju propsa (prop drilling)".

2. Dijeljeno stanje s custom hookom kao singletonom

Možete stvoriti custom hook koji se ponaša kao singleton definiranjem njegovog stanja izvan funkcije hooka i osiguravanjem da se stvori samo jedna instanca hooka. Ovo je korisno za upravljanje globalnim stanjem aplikacije.

Primjer: Brojač

import { useState } from 'react';

let count = 0; // Stanje je definirano izvan hooka

const useCounter = () => {
  const [, setCount] = useState(count); // Prisilno ponovno renderiranje

  const increment = () => {
    count++;
    setCount(count);
  };

  const decrement = () => {
    count--;
    setCount(count);
  };

  return {
    count,
    increment,
    decrement,
  };
};

export default useCounter;

Objašnjenje:

• count: Stanje brojača definirano je izvan funkcije useCounter, što ga čini globalnom varijablom.
• useCounter: Hook koristi useState prvenstveno za pokretanje ponovnog renderiranja kada se globalna varijabla count promijeni. Stvarna vrijednost stanja nije pohranjena unutar hooka.
• increment i decrement: Ove funkcije mijenjaju globalnu varijablu count, a zatim pozivaju setCount kako bi prisilile sve komponente koje koriste hook da se ponovno renderiraju i prikažu ažuriranu vrijednost.

Primjer upotrebe:

import React from 'react';
import useCounter from './useCounter';

const ComponentA = () => {
  const { count, increment } = useCounter();

  return (
    

      
Komponenta A: {count}
      Povećaj
    
  );
};

const ComponentB = () => {
  const { count, decrement } = useCounter();

  return (
    

      
Komponenta B: {count}
      Smanji
    
  );
};

const App = () => {
  return (
    

      
      
    
  );
};

export default App;

U ovom primjeru, i ComponentA i ComponentB koriste hook useCounter. Kada se brojač poveća u ComponentA, ComponentB se automatski ažurira kako bi odražavala promjenu jer obje koriste istu globalnu varijablu count.

Prednosti korištenja singleton hooka:

• Jednostavna implementacija: Relativno jednostavno za implementaciju za jednostavno dijeljenje stanja.
• Globalni pristup: Pruža jedinstveni izvor istine za dijeljeno stanje.

Nedostaci korištenja singleton hooka:

• Problemi s globalnim stanjem: Može dovesti do čvrsto povezanih komponenti i otežati razumijevanje stanja aplikacije, posebno u velikim aplikacijama. Globalno stanje može biti teško za upravljanje i debugiranje.
• Izazovi pri testiranju: Testiranje komponenti koje se oslanjaju na globalno stanje može biti složenije, jer morate osigurati da je globalno stanje pravilno inicijalizirano i očišćeno nakon svakog testa.
• Ograničena kontrola: Manje kontrole nad time kada i kako se komponente ponovno renderiraju u usporedbi s korištenjem React Contexta ili drugih rješenja za upravljanje stanjem.
• Potencijal za bugove: Budući da je stanje izvan React životnog ciklusa, u složenijim scenarijima može doći do neočekivanog ponašanja.

3. Korištenje useReducer s Contextom za složeno upravljanje stanjem

Za složenije scenarije upravljanja stanjem, kombinacija useReducer i useContext pruža moćno i fleksibilno rješenje. useReducer vam omogućuje upravljanje prijelazima stanja na predvidljiv način, dok vam useContext omogućuje dijeljenje stanja i dispatch funkcije kroz cijelu aplikaciju.

Primjer: Košarica za kupnju

import React, { createContext, useContext, useReducer } from 'react';

// Početno stanje
const initialState = {
  items: [],
  total: 0,
};

// Reducer funkcija
const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, action.payload],
        total: state.total + action.payload.price,
      };
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter((item) => item.id !== action.payload.id),
        total: state.total - action.payload.price,
      };
    default:
      return state;
  }
};

// Kreiranje Cart Contexta
const CartContext = createContext();

// Kreiranje komponente Cart Provider
const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  return (
    
      {children}
    
  );
};

// Custom hook za pristup Cart Contextu
const useCart = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart se mora koristiti unutar CartProvidera');
  }
  return context;
};

export { CartProvider, useCart };

Objašnjenje:

• initialState: Definira početno stanje košarice za kupnju.
• cartReducer: Reducer funkcija koja obrađuje različite akcije (ADD_ITEM, REMOVE_ITEM) za ažuriranje stanja košarice.
• CartContext: Objekt contexta za stanje košarice i dispatch funkciju.
• CartProvider: Pruža stanje košarice i dispatch funkciju svojoj djeci koristeći useReducer i CartContext.Provider.
• useCart: Custom hook koji omogućuje komponentama pristup contextu košarice.

Primjer upotrebe:

import React from 'react';
import { CartProvider, useCart } from './CartContext';

const ProductList = () => {
  const { dispatch } = useCart();

  const products = [
    { id: 1, name: 'Proizvod A', price: 20 },
    { id: 2, name: 'Proizvod B', price: 30 },
  ];

  return (
    

      {products.map((product) => (
        

          
{product.name} - ${product.price}
           dispatch({ type: 'ADD_ITEM', payload: product })}>Dodaj u košaricu
        
      ))}
    
  );
};

const Cart = () => {
  const { state } = useCart();

  return (
    

      
Košarica
      {state.items.length === 0 ? (
        
Vaša košarica je prazna.
      ) : (
        

          {state.items.map((item) => (
            
{item.name} - ${item.price}
          ))}
        
      )}
      
Ukupno: ${state.total}
    
  );
};

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

U ovom primjeru, ProductList i Cart obje koriste hook useCart za pristup stanju košarice i dispatch funkciji. Dodavanje proizvoda u košaricu u ProductList ažurira stanje košarice, a komponenta Cart se automatski ponovno renderira kako bi prikazala ažurirani sadržaj košarice i ukupan iznos.

Prednosti korištenja useReducer s Contextom:

• Predvidljivi prijelazi stanja: useReducer nameće predvidljiv obrazac upravljanja stanjem, što olakšava debugiranje i održavanje složene logike stanja.
• Centralizirano upravljanje stanjem: Stanje i logika ažuriranja centralizirani su u reducer funkciji, što olakšava razumijevanje i modificiranje.
• Skalabilnost: Dobro prilagođeno za upravljanje složenim stanjem koje uključuje više povezanih vrijednosti i prijelaza.

Nedostaci korištenja useReducer s Contextom:

• Povećana složenost: Može biti složenije za postavljanje u usporedbi s jednostavnijim tehnikama poput dijeljenog stanja s useState.
• Višak koda (Boilerplate): Zahtijeva definiranje akcija, reducer funkcije i provider komponente, što može rezultirati većom količinom ponavljajućeg koda.

4. Prosljeđivanje propsa i callback funkcije (izbjegavati kada je moguće)

Iako nije izravna tehnika sinkronizacije stanja, prosljeđivanje propsa (prop drilling) i callback funkcije mogu se koristiti za prenošenje stanja i funkcija za ažuriranje između komponenti i hookova. Međutim, ovaj se pristup općenito ne preporučuje za složene aplikacije zbog svojih ograničenja i potencijala da oteža održavanje koda.

Primjer: Vidljivost modala

import React, { useState } from 'react';

const Modal = ({ isOpen, onClose }) => {
  if (!isOpen) {
    return null;
  }

  return (
    

      

        
Ovo je sadržaj modala.
        Zatvori modal
      
    
  );
};

const ParentComponent = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    

      Otvori modal
      
    
  );
};

export default ParentComponent;

Objašnjenje:

• ParentComponent: Upravlja stanjem isModalOpen i pruža funkcije openModal i closeModal.
• Modal: Prima stanje isOpen i funkciju onClose kao propse.

Nedostaci prosljeđivanja propsa (Prop Drilling):

• Nered u kodu: Može dovesti do opširnog i teško čitljivog koda, posebno kada se props prosljeđuje kroz više razina komponenti.
• Otežano održavanje: Otežava refaktoriranje i održavanje koda, jer promjene u stanju ili funkcijama za ažuriranje zahtijevaju izmjene u više komponenti.
• Problemi s performansama: Može uzrokovati nepotrebna ponovna renderiranja posredničkih komponenti koje zapravo ne koriste proslijeđene propse.

Preporuka: Izbjegavajte prosljeđivanje propsa i callback funkcije za složene scenarije upravljanja stanjem. Umjesto toga, koristite React Context ili namjensku biblioteku za upravljanje stanjem.

Odabir prave tehnike

Najbolja tehnika za sinkronizaciju stanja između custom hookova ovisi o specifičnim zahtjevima vaše aplikacije.

• Jednostavno dijeljeno stanje: Ako trebate dijeliti jednostavnu vrijednost stanja između nekoliko komponenti, React Context s useState je dobra opcija.
• Globalno stanje aplikacije (s oprezom): Singleton custom hookovi mogu se koristiti za upravljanje globalnim stanjem aplikacije, ali budite svjesni potencijalnih nedostataka (čvrsta povezanost, izazovi pri testiranju).
• Složeno upravljanje stanjem: Za složenije scenarije upravljanja stanjem, razmislite o korištenju useReducer s React Contextom. Ovaj pristup pruža predvidljiv i skalabilan način upravljanja prijelazima stanja.
• Izbjegavajte prosljeđivanje propsa: Prosljeđivanje propsa i callback funkcije treba izbjegavati za složeno upravljanje stanjem, jer mogu dovesti do nereda u kodu i poteškoća u održavanju.

Najbolje prakse za koordinaciju stanja hookova

• Održavajte hookove fokusiranima: Dizajnirajte svoje hookove tako da budu odgovorni za specifične zadatke ili domene podataka. Izbjegavajte stvaranje pretjerano složenih hookova koji upravljaju prevelikim stanjem.
• Koristite opisne nazive: Koristite jasne i opisne nazive za svoje hookove i varijable stanja. To će olakšati razumijevanje svrhe hooka i podataka kojima upravlja.
• Dokumentirajte svoje hookove: Pružite jasnu dokumentaciju za svoje hookove, uključujući informacije o stanju kojim upravljaju, akcijama koje izvršavaju i ovisnostima koje imaju.
• Testirajte svoje hookove: Pišite jedinične testove za svoje hookove kako biste osigurali da rade ispravno. To će vam pomoći da rano uhvatite bugove i spriječite regresije.
• Razmislite o biblioteci za upravljanje stanjem: Za velike i složene aplikacije, razmislite o korištenju namjenske biblioteke za upravljanje stanjem poput Reduxa, Zustanda ili Jotaija. Ove biblioteke pružaju naprednije značajke za upravljanje stanjem aplikacije i mogu vam pomoći da izbjegnete uobičajene zamke.
• Dajte prednost kompoziciji: Kada je to moguće, razbijte složenu logiku na manje, komponibilne hookove. To promiče ponovnu upotrebu koda i poboljšava održivost.

Napredna razmatranja

• Memoizacija: Koristite React.memo, useMemo i useCallback za optimizaciju performansi sprječavanjem nepotrebnih ponovnih renderiranja.
• Debouncing i Throttling: Implementirajte tehnike debouncinga i throttlinga za kontrolu učestalosti ažuriranja stanja, posebno kada se radi o korisničkom unosu ili mrežnim zahtjevima.
• Obrada pogrešaka: Implementirajte pravilnu obradu pogrešaka u svojim hookovima kako biste spriječili neočekivane padove i pružili informativne poruke o pogreškama korisniku.
• Asinkrone operacije: Kada se bavite asinkronim operacijama, koristite useEffect s pravilnim poljem ovisnosti kako biste osigurali da se hook izvršava samo kada je to potrebno. Razmislite o korištenju biblioteka poput `use-async-hook` za pojednostavljenje asinkrone logike.

Zaključak

Sinkronizacija stanja između React custom hookova ključna je za izgradnju robusnih i održivih aplikacija. Razumijevanjem različitih tehnika i najboljih praksi navedenih u ovom članku, možete učinkovito upravljati koordinacijom stanja i stvoriti besprijekornu komunikaciju komponenti. Ne zaboravite odabrati tehniku koja najbolje odgovara vašim specifičnim zahtjevima te dati prednost jasnoći koda, održivosti i testabilnosti. Bilo da gradite mali osobni projekt ili veliku poslovnu aplikaciju, ovladavanje sinkronizacijom stanja hookova značajno će poboljšati kvalitetu i skalabilnost vašeg React koda.